<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-04-09 18:05:45
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-04-14 17:26:03
 * @FilePath: \dong2\src\views\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style=" width: 400px; height: 600px; border: 1px solid #333;">
    <!-- <myHeader></myHeader>
        <div class="main">
            <div class="left"></div>
            <rightP></rightP>
        </div>
        <introduceBox></introduceBox>
        <mySection></mySection>
        <myFooter></myFooter>
        <myLast></myLast> -->
    <!-- <v-form-designer></v-form-designer> -->
    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef"></v-form-render>
    <el-button type="primary" @click="submitForm">Submit</el-button>
  </div>
</template>

<script>
// import swiper from '../components/swiper.vue'
// import myHeader from "../components/myHeader.vue";
// import introduceBox from "../components/index/introduceBox.vue";
// import rightP from "@/components/index/rightP.vue";
// import mySection from "@/components/index/mySection.vue";
// import myFooter from "@/components/index/myFooter.vue";
// import myLast from "@/components/index/myLast.vue";
// export default {
//   name: "index",
//   data() {
//     return {};
//   },
//   components: {
//     // swiper,
//     myHeader,
//     introduceBox,
//     rightP,
//     mySection,
//     myFooter,
//     myLast,
//   },
// };
// console.log(
//   JSON.stringify({
//     widgetList: [
//       {
//         type: "checkbox",
//         icon: "checkbox-field",
//         formItemFlag: true,
//         options: {
//           name: "2",
//           label: "你今天快乐吗",
//           labelAlign: "label-right-align",
//           defaultValue: [],
//           columnWidth: "200px",
//           size: "",
//           displayStyle: "block",
//           buttonStyle: false,
//           border: false,
//           labelWidth: "",
//           labelHidden: false,
//           disabled: false,
//           hidden: false,
//           optionItems: [
//             { label: "check 1", value: 1 },
//             { label: "check 2", value: 2 },
//             { label: "check 3", value: 3 },
//             { value: 4, label: "new option" },
//           ],
//           required: false,
//           requiredHint: "",
//           validation: "",
//           validationHint: "",
//           customClass: [],
//           labelIconClass: null,
//           labelIconPosition: "rear",
//           labelTooltip: null,
//           onCreated: "",
//           onMounted: "",
//           onChange: "",
//           onValidate: "",
//         },
//         id: "checkbox107790",
//       },
//       {
//         type: "static-text",
//         icon: "static-text",
//         formItemFlag: false,
//         options: {
//           name: "statictext92832",
//           columnWidth: "200px",
//           hidden: false,
//           textContent: "static text",
//           textAlign: "left",
//           fontSize: "13px",
//           preWrap: false,
//           customClass: "",
//           onCreated: "",
//           onMounted: "",
//           label: "static-text",
//         },
//         id: "statictext92832",
//       },
//       {
//         type: "radio",
//         icon: "radio-field",
//         formItemFlag: true,
//         options: {
//           name: "1",
//           label: "选",
//           labelAlign: "",
//           defaultValue: null,
//           columnWidth: "200px",
//           size: "",
//           displayStyle: "inline",
//           buttonStyle: true,
//           border: false,
//           labelWidth: null,
//           labelHidden: false,
//           disabled: false,
//           hidden: false,
//           optionItems: [
//             { label: "radio 1", value: 1 },
//             { label: "radio 2", value: 2 },
//             { label: "radio 3", value: 3 },
//           ],
//           required: false,
//           requiredHint: "",
//           validation: "",
//           validationHint: "",
//           customClass: [],
//           labelIconClass: null,
//           labelIconPosition: "rear",
//           labelTooltip: null,
//           onCreated: "",
//           onMounted: "",
//           onChange: "",
//           onValidate: "",
//         },
//         id: "radio101586",
//       },
//     ],

//   })
// );
export default {
  data() {
    return {
      formJson: {
        widgetList: [
          {
            type: "checkbox",
            icon: "checkbox-field",
            formItemFlag: true,
            options: {
              name: "2",
              label: "你今天快乐吗",
              labelAlign: "label-right-align",
              defaultValue: [],
              columnWidth: "200px",
              size: "",
              displayStyle: "block",
              buttonStyle: false,
              border: false,
              labelWidth: "",
              labelHidden: false,
              disabled: false,
              hidden: false,
              optionItems: [
                {
                  label: "check 1",
                  value: 1,
                },
                {
                  label: "check 2",
                  value: 2,
                },
                {
                  label: "check 3",
                  value: 3,
                },
                {
                  value: 4,
                  label: "new option",
                },
              ],
              required: false,
              requiredHint: "",
              validation: "",
              validationHint: "",
              customClass: [],
              labelIconClass: null,
              labelIconPosition: "rear",
              labelTooltip: null,
              onCreated: "",
              onMounted: "",
              onChange: "",
              onValidate: "",
            },
            id: "checkbox107790",
          },
          {
            modelName: "formData",
            refName: "vForm",
            rulesName: "rules",
            labelWidth: 80,
            labelPosition: "left",
            size: "",
            labelAlign: "label-left-align",
            cssCode: "",
            customClass: [],
            functions: "",
            layoutType: "H5",
            onFormCreated: "",
            onFormMounted: "",
            onFormDataChange: "",
          },
        ],
        formConfig: {
          modelName: "formData",
          refName: "vForm",
          rulesName: "rules",
          labelWidth: 80,
          labelPosition: "left",
          size: "",
          labelAlign: "label-left-align",
          cssCode: "",
          customClass: [],
          functions: "",
          layoutType: "PC",
          onFormCreated: "",
          onFormMounted: "",
          onFormDataChange: "",
        },
      },
      formData: {},
      optionData: {},
    };
  },
  methods: {
    submitForm() {
      this.$refs.vFormRef
        .getFormData()
        .then((formData) => {
          // Form Validation OK
          alert(JSON.stringify(formData));
        })
        .catch((error) => {
          // Form Validation failed
          this.$message.error(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.main {
  background-color: rgb(235, 235, 235);
  height: 400px;
  display: flex;
  position: relative;
}
.left {
  background: url(@/assets/section/bg.jpg);
  width: 68%;
}
</style>
